<template>
  <div>
    <el-form
      :model="search"
      ref="form"
      label-width="80px"
      :inline="false"
      size="normal"
    >
      <div class="flex">
        <el-form-item label="岗位名称">
          <el-input v-model="search.name"></el-input>
        </el-form-item>
        <el-form-item label="岗位分类">
          <el-select v-model="search.cate" placeholder="请选择分类" clearable>
            <el-option
              v-for="item in category.parentList"
              :key="item.objectId"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table :data="joblist" border stripe>
      <el-table-column label="岗位名称" prop="jobName" />
      <el-table-column label="薪资范围" prop="salaryDesc" />
      <el-table-column label="城市" prop="cityName" />
      <el-table-column label="分类" prop="lv1" />
      <el-table-column label="学历" prop="jobDegree" />
      <el-table-column label="经验要求" prop="jobExperience" />
      <el-table-column label="经验要求" width="150px">
        <template #default="scope">
          <div>
            <el-button type="primary" size="small" @click="">编辑</el-button>
            <el-button v-permit type="danger" size="small" @click=""
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end mt-5">
      <el-pagination
        v-model:current-page="current"
        v-model:page-size="pageSize"
        :page-sizes="[10, 100, 200]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useCategory } from "../../store/category";
import { JobType } from "../../types/job";
import { jobGet } from "../../api/job";

const search = reactive({
  name: "",
  cate: "",
});
const category = useCategory();
//搜索
const handleSearch = async () => {
  console.log(search);
  current.value = 1; //重新回到第一页
  let res = await jobGet(1, pageSize.value, search); //携带查询条件
  let { results, count } = res.data;
  joblist.value = results;
  total.value = count; //更新不同条件下查出的数据总条数
};
//表格首屏渲染
const joblist = ref<Array<JobType>>([]);
const total = ref<number>(0);
let res = await jobGet();
let { results, count } = res.data;
joblist.value = results;
total.value = count;
//分页
const current = ref<number>(1);
const pageSize = ref<number>(10); //每页显示的数据条数
//每页数量变化事件
const handleSizeChange = async () => {
  current.value = 1; //重新回到第一页
  let res = await jobGet(1, pageSize.value, search);
  joblist.value = res.data.results;
};
//页码变化触发事件
const handleCurrentChange = async (page: number) => {
  let res = await jobGet(page, pageSize.value, search);
  joblist.value = res.data.results;
};
</script>

<style scoped></style>
